<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手动创建考勤记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f8f9fa; font-size: 1.08rem; }
        .container { max-width: 700px; margin: 0 auto; }
        @media (max-width: 600px) {
            .container { max-width: 99vw; padding: 0 2vw; }
            .form-control, .btn, th, td { font-size: 0.98rem; }
        }
        th, td { vertical-align: middle; }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">逐光帮会管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="/attendance_table">总考勤表</a></li>
                <li class="nav-item"><a class="nav-link" href="/">考勤上传</a></li>
                <li class="nav-item"><a class="nav-link" href="/jielong_admin">接龙任务管理</a></li>
                <li class="nav-item"><a class="nav-link" href="/jielong/history">接龙历史</a></li>
            </ul>
            <div class="d-flex">
                <a class="btn btn-outline-secondary" href="/logout">退出登录</a>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <h2 class="mb-4">手动创建考勤记录</h2>
    {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
    {% if success %}<div class="alert alert-success">{{ success }}</div>{% endif %}
    <form method="post">
        <div class="row mb-3">
            <div class="col-md-6 mb-2">
                <label for="date" class="form-label">日期</label>
                <input type="date" class="form-control" id="date" name="date" required>
            </div>
            <div class="col-md-6 mb-2">
                <label for="type" class="form-label">类型</label>
                <input type="text" class="form-control" id="type" name="type" placeholder="如：接龙，帮战1，或者帮战2" required>
            </div>
        </div>
        <div class="table-responsive mb-3">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>玩家名称</th>
                        <th>职业</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                {% for name, job in players %}
                    <tr>
                        <td>{{ name }}</td>
                        <td>{{ job }}</td>
                        <td>
                            <select class="form-select form-select-sm" name="status_{{ name }}">
                                <option value="参与">参与</option>
                                <option value="请假">请假</option>
                                <option value="替补">替补</option>
                                <option value="缺勤">缺勤</option>
                            </select>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <button type="submit" class="btn btn-primary">创建考勤记录</button>
        <a href="/attendance_table" class="btn btn-secondary ms-2">返回总表</a>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
